<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
      <title>floatz - Test page for complex forms</title>
      <meta http-equiv="content-type" content="text/html; CHARSET=utf-8" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      <meta http-equiv="content-style-type" content="text/css" />
      <meta http-equiv="content-language" content="en" />
      <meta name="author" content="" />
      <meta name="robots" content="index,follow" />
      <meta name="description" content="" />
      <!-- for testing shrinked version -->
      <link rel="stylesheet" type="text/css" href="../../floatz/floatz.fixed.css" />
      <!-- <link rel="stylesheet" type="text/css" href="../../floatz/floatz.liquid.css" /> -->
      <!-- for testing development version -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/floatz.layout.fixed.css" /> -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/floatz.layout.liquid.css" /> -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/debug/floatz.layout.debug.css" /> -->
      <style type="text/css">
      </style>
   </head>
   <body>
      <!-- page container -->
      <div id="flz_page">
         <div class="flz_box">
            <div class="flz_spacer">
               <form class="flz_form" action="" method="post">
                  <h1>One column form</h1>
                  <label for="textbox1">Textbox</label>
                  <input id="textbox1" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                  <label for="textbox2">Textbox</label>

                  <div class="flz_combobox">
                     <input id="textbox2" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                     <!-- Image must be in next line - otherwise unnecessary whitespace in IE -->
                     <a href="#">
                        <img src="images/datepicker.gif" alt=""/>
                     </a>
                  </div>

                  <input id="radiobutton1" type="radio" name="radiogroup1" />
                  <label for="radiobutton1" class="flz_inline">RadioButton 1</label>
                  <input id="radiobutton2" type="radio" name="radiogroup1" />
                  <label for="radiobutton2" class="flz_inline">RadioButton 1</label>
                  <input id="radiobutton3" type="radio" name="radiogroup1" />
                  <label for="radiobutton3" class="flz_inline">RadioButton 1</label>

                  <label for="textarea1">Textarea</label>
                  <textarea id="textarea1" cols="1" rows="3">Lorem ipsum dolor sit amed</textarea>

                  <label for="selectbox1">Selectbox</label>
                  <select id="selectbox1">
                     <option>Choice 1</option>
                     <option selected="selected">Choice 2</option>
                     <option>Choice 3</option>
                  </select>

                  <input id="checkbox1" type="checkbox" />
                  <label for="checkbox1" class="flz_inline">Checkbox 1</label>
                  <input id="checkbox2" type="checkbox" />
                  <label for="checkbox2" class="flz_inline">Checkbox 1</label>
                  <input id="checkbox3" type="checkbox" />
                  <label for="checkbox3" class="flz_inline">Checkbox 1</label>

                  <div class="flz_clear">
                     <input id="button1" class="flz_button" type="button" value="Button" />
                     <input id="button2" class="flz_button" type="button" value="Button" />
                  </div>

                  <h1>Two column form</h1>
                  <div class="flz_box flz_l50">
                     <div class="flz_lsubspacer">
                        <label for="textbox3">Textbox</label>
                        <input id="textbox3" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />

                        <label for="textbox4">Textbox</label>
                        <div class="flz_combobox">
                           <input id="textbox4" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                           <!-- Image must be in next line - otherwise unnecessary whitespace in IE -->
                           <a href="#">
                              <img src="images/datepicker.gif" alt=""/>
                           </a>
                        </div>

                        <input id="radiobutton4" type="radio" name="radiogroup1" />
                        <label for="radiobutton4" class="flz_inline">RadioButton 1</label>
                        <input id="radiobutton5" type="radio" name="radiogroup1" />
                        <label for="radiobutton5" class="flz_inline">RadioButton 1</label>
                        <input id="radiobutton6" type="radio" name="radiogroup1" />
                        <label for="radiobutton6" class="flz_inline">RadioButton 1</label>

                        <label for="textarea2">Textarea</label>
                        <textarea id="textarea2" cols="1" rows="3">Lorem ipsum dolor sit amed</textarea>

                        <label for="selectbox2">Selectbox</label>
                        <select id="selectbox2">
                           <option>Choice 1</option>
                           <option selected="selected">Choice 2</option>
                           <option>Choice 3</option>
                        </select>

                        <input id="checkbox4" type="checkbox" />
                        <label for="checkbox5" class="flz_inline">Checkbox 1</label>
                        <input id="checkbox5" type="checkbox" />
                        <label for="checkbox5" class="flz_inline">Checkbox 1</label>
                        <input id="checkbox6" type="checkbox" />
                        <label for="checkbox6" class="flz_inline">Checkbox 1</label>

                        <div class="flz_clear">
                           <input id="button3" class="flz_button" type="button" value="Button" />
                           <input id="button4" class="flz_button" type="button" value="Button" />
                        </div>
                     </div>
                  </div>
                  <div class="flz_box flz_r50">
                     <div class="flz_rsubspacer">
                        <input id="checkbox7" type="checkbox" />
                        <label for="checkbox7" class="flz_inline">Checkbox 1</label>
                        <input id="checkbox8" type="checkbox" />
                        <label for="checkbox8" class="flz_inline">Checkbox 1</label>
                        <input id="checkbox9" type="checkbox" />
                        <label for="checkbox9" class="flz_inline">Checkbox 1</label>

                        <label for="selectbox3">Selectbox</label>
                        <select id="selectbox3">
                           <option>Choice 1</option>
                           <option selected="selected">Choice 2</option>
                           <option>Choice 3</option>
                        </select>

                        <label for="textarea3">Textarea</label>
                        <textarea id="textarea3" cols="1" rows="3">Lorem ipsum dolor sit amed</textarea>

                        <input id="radiobutton7" type="radio" name="radiogroup1" />
                        <label for="radiobutton7" class="flz_inline">RadioButton 1</label>
                        <input id="radiobutton8" type="radio" name="radiogroup1" />
                        <label for="radiobutton8" class="flz_inline">RadioButton 1</label>
                        <input id="radiobutton9" type="radio" name="radiogroup1" />
                        <label for="radiobutton9" class="flz_inline">RadioButton 1</label>

                        <label for="textbox5">Textbox</label>
                        <div class="flz_combobox">
                           <input id="textbox5" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                           <!-- Image must be in next line - otherwise unnecessary whitespace in IE -->
                           <a href="#">
                              <img src="images/datepicker.gif" alt=""/>
                           </a>
                        </div>

                        <label for="textbox6">Textbox</label>
                        <input id="textbox6" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />

                        <div class="flz_clear">
                           <input id="button5" class="flz_button" type="button" value="Button" />
                           <input id="button6" class="flz_button" type="button" value="Button" />
                        </div>
                     </div>
                  </div>

                  <h1>Three column form</h1>
                  <div class="flz_box flz_l33">
                     <div class="flz_lsubspacer">
                        <label for="textbox7">Textbox</label>
                        <input id="textbox7" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />

                        <label for="textbox8">Textbox</label>
                        <div class="flz_combobox">
                           <input id="textbox8" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                           <!-- Image must be in next line - otherwise unnecessary whitespace in IE -->
                           <a href="#">
                              <img src="images/datepicker.gif" alt=""/>
                           </a>
                        </div>

                        <input id="radiobutton10" type="radio" class="flz_radio" name="radiogroup1" />
                        <label for="radiobutton10" class="flz_inline">RadioButton 1</label>
                        <input id="radiobutton11" type="radio" name="radiogroup1" />
                        <label for="radiobutton11" class="flz_inline">RadioButton 1</label>
                        <input id="radiobutton12" type="radio" name="radiogroup1" />
                        <label for="radiobutton12" class="flz_inline">RadioButton 1</label>

                        <label for="textarea4">Textarea</label>
                        <textarea id="textarea4" cols="1" rows="3">Lorem ipsum dolor sit amed</textarea>

                        <label for="selectbox4">Selectbox</label>
                        <select id="selectbox4">
                           <option>Choice 1</option>
                           <option selected="selected">Choice 2</option>
                           <option>Choice 3</option>
                        </select>

                        <input id="checkbox10" type="checkbox" />
                        <label for="checkbox10" class="flz_inline">Checkbox 1</label>
                        <input id="checkbox11" type="checkbox" />
                        <label for="checkbox11" class="flz_inline">Checkbox 1</label>
                        <input id="checkbox12" type="checkbox" />
                        <label for="checkbox12" class="flz_inline">Checkbox 1</label>

                        <div class="flz_clear">
                           <input id="button7" class="flz_button" type="button" value="Button" />
                           <input id="button8" class="flz_button" type="button" value="Button" />
                        </div>
                     </div>
                  </div>
                  <div class="flz_box flz_m33">
                     <div class="flz_msubspacer">
                        <input id="checkbox13" type="checkbox" />
                        <label for="checkbox13" class="flz_inline">Checkbox 1</label>
                        <input id="checkbox14" type="checkbox" />
                        <label for="checkbox14" class="flz_inline">Checkbox 1</label>
                        <input id="checkbox15" type="checkbox" />
                        <label for="checkbox15" class="flz_inline">Checkbox 1</label>

                        <label for="selectbox5">Selectbox</label>
                        <select id="selectbox5">
                           <option>Choice 1</option>
                           <option selected="selected">Choice 2</option>
                           <option>Choice 3</option>
                        </select>

                        <label for="textarea5">Textarea</label>
                        <textarea id="textarea5" cols="1" rows="3">Lorem ipsum dolor sit amed</textarea>

                        <input id="radiobutton13" type="radio" name="radiogroup1" />
                        <label for="radiobutton13" class="flz_inline">RadioButton 1</label>
                        <input id="radiobutton14" type="radio" name="radiogroup1" />
                        <label for="radiobutton14" class="flz_inline">RadioButton 1</label>
                        <input id="radiobutton15" type="radio" name="radiogroup1" />
                        <label for="radiobutton15" class="flz_inline">RadioButton 1</label>

                        <label for="textbox9">Textbox</label>
                        <div class="flz_combobox">
                           <input id="textbox9" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                           <!-- Image must be in next line - otherwise unnecessary whitespace in IE -->
                           <a href="#">
                              <img src="images/datepicker.gif" alt=""/>
                           </a>
                        </div>
   
                        <label for="textbox10">Textbox</label>
                        <input id="textbox10" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />

                        <div class="flz_clear">
                           <input id="button9" class="flz_button" type="button" value="Button" />
                           <input id="button10" class="flz_button" type="button" value="Button" />
                        </div>
                     </div>
                  </div>
                  <div class="flz_box flz_r33">
                     <div class="flz_rsubspacer">
                        <label for="textbox11">Textbox</label>
                        <input id="textbox11" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />

                        <label for="textbox12">Textbox</label>
                        <div class="flz_combobox">
                           <input id="textbox12" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                           <!-- Image must be in next line - otherwise unnecessary whitespace in IE -->
                           <a href="#">
                              <img src="images/datepicker.gif" alt=""/>
                           </a>
                        </div>

                        <input id="radiobutton17" type="radio" name="radiogroup1" />
                        <label for="radiobutton17" class="flz_inline">RadioButton 1</label>
                        <input id="radiobutton18" type="radio" name="radiogroup1" />
                        <label for="radiobutton18" class="flz_inline">RadioButton 1</label>
                        <input id="radiobutton19" type="radio" name="radiogroup1" />
                        <label for="radiobutton19" class="flz_inline">RadioButton 1</label>

                        <label for="textarea6">Textarea</label>
                        <textarea id="textarea6" cols="1" rows="3">Lorem ipsum dolor sit amed</textarea>

                        <label for="selectbox6">Selectbox</label>
                        <select id="selectbox6">
                           <option>Choice 1</option>
                           <option selected="selected">Choice 2</option>
                           <option>Choice 3</option>
                        </select>

                        <input id="checkbox17" type="checkbox" />
                        <label for="checkbox17" class="flz_inline">Checkbox 1</label>
                        <input id="checkbox18" type="checkbox" />
                        <label for="checkbox18" class="flz_inline">Checkbox 1</label>
                        <input id="checkbox19" type="checkbox" />
                        <label for="checkbox19" class="flz_inline">Checkbox 1</label>

                        <div class="flz_clear">
                           <input id="button11" class="flz_button" type="button" value="Button" />
                           <input id="button12" class="flz_button" type="button" value="Button" />
                        </div>
                     </div>
                  </div>

                  <h1>Flexible form</h1>
                  <!-- Row 1 -->
                  <div class="flz_box flz_l50">
                     <div class="flz_lsubspacer_mrmc_top">
                        <label for="textbox13">Textbox</label>
                        <input id="textbox13" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                     </div>
                  </div>
                  <div class="flz_box flz_r50">
                     <div class="flz_rsubspacer_mrmc_top">
                        <label for="textbox14">Textbox</label>
                        <input id="textbox14" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                     </div>
                  </div>

                  <!-- Row 2 -->
                  <div class="flz_box flz_l33">
                     <div class="flz_lsubspacer_mrmc_mid">
                        <label for="textbox15">Textbox</label>
                        <input id="textbox15" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                     </div>
                  </div>
                  <div class="flz_box flz_m33">
                     <div class="flz_msubspacer_mrmc_mid">
                        <label for="textbox16">Textbox</label>
                        <div class="flz_combobox">
                           <input id="textbox16" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                           <!-- Image must be in next line - otherwise unnecessary whitespace in IE -->
                           <a href="#">
                              <img src="images/datepicker.gif" alt=""/>
                           </a>
                        </div>
                     </div>
                  </div>
                  <div class="flz_box flz_r33">
                     <div class="flz_rsubspacer_mrmc_mid">
                        <label for="selectbox7">Selectbox</label>
                        <select id="selectbox7">
                           <option>Choice 1</option>
                           <option selected="selected">Choice 2</option>
                           <option>Choice 3</option>
                        </select>
                     </div>
                  </div>

                  <!-- Row 3 -->
                  <div class="flz_box flz_l50">
                     <div class="flz_lsubspacer_mrmc_mid">
                        <label for="textarea7">Textarea</label>
                        <textarea id="textarea7" cols="1" rows="7">Lorem ipsum dolor sit amed</textarea>
                     </div>
                  </div>
                  <div class="flz_box flz_r50">
                     <div class="flz_rsubspacer_mrmc_mid">
                        <!-- Row 3 / 1 -->
                        <div class="flz_box flz_l50">
                           <div class="flz_lsubspacer_mrmc_top">
                              <label for="textbox17">Textbox</label>
                              <input id="textbox17" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                           </div>
                        </div>
                        <div class="flz_box flz_r50">
                           <div class="flz_rsubspacer_mrmc_top">
                              <label for="textbox18">Textbox</label>
                              <div class="flz_combobox">
                                 <input id="textbox18" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                                 <!-- Image must be in next line - otherwise unnecessary whitespace in IE -->
                                 <a href="#">
                                    <img src="images/datepicker.gif" alt=""/>
                                 </a>
                              </div>
                           </div>
                        </div>
                        <!-- Row 3 / 2-->
                        <div class="flz_box flz_l33">
                           <div class="flz_lsubspacer_mrmc_mid">
                              <label for="selectbox8">Selectbox</label>
                              <select id="selectbox8">
                                 <option>Choice 1</option>
                                 <option selected="selected">Choice 2</option>
                                 <option>Choice 3</option>
                              </select>
                           </div>
                        </div>
                        <div class="flz_box flz_m33">
                           <div class="flz_msubspacer_mrmc_mid">
                              <label for="textbox19">Textbox</label>
                              <div class="flz_combobox">
                                 <input id="textbox19" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                                 <!-- Image must be in next line - otherwise unnecessary whitespace in IE -->
                                 <a href="#">
                                    <img src="images/datepicker.gif" alt=""/>
                                 </a>
                              </div>
                           </div>
                        </div>
                        <div class="flz_box flz_r33">
                           <div class="flz_rsubspacer_mrmc_mid">
                              <label for="textbox20">Textbox</label>
                              <input id="textbox20" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                           </div>
                        </div>
                        <!-- Row 3 / 3-->
                        <div class="flz_box">
                           <div class="flz_rsubspacer_mrmc_bottom">
                              <input id="checkbox20" type="checkbox" />
                              <label for="checkbox20" class="flz_inline">Checkbox 1</label>
                              <input id="checkbox21" type="checkbox" />
                              <label for="checkbox21" class="flz_inline">Checkbox 1</label>
                              <input id="checkbox22" type="checkbox" />
                              <label for="checkbox22" class="flz_inline">Checkbox 1</label>
                           </div>
                        </div>
                     </div>
                  </div>

                  <!-- Row 4 -->
                  <div class="flz_box flz_clear">
                     <div class="flz_box flz_l25">
                        <div class="flz_lsubspacer_mrmc_bottom">
                           <label for="textbox21">Textbox</label>
                           <input id="textbox21" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                        </div>
                     </div>
                     <div class="flz_box flz_m25">
                        <div class="flz_msubspacer_mrmc_bottom">
                           <label for="selectbox9">Selectbox</label>
                           <select id="selectbox9">
                              <option>Choice 1</option>
                              <option selected="selected">Choice 2</option>
                              <option>Choice 3</option>
                           </select>
                        </div>
                     </div>
                     <div class="flz_box flz_m25">
                        <div class="flz_msubspacer_mrmc_bottom">
                           <label for="textbox22">Textbox</label>
                           <input id="textbox22" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                        </div>
                     </div>
                     <div class="flz_box flz_r25">
                        <div class="flz_rsubspacer_mrmc_bottom">
                           <label for="textbox23">Textbox</label>
                           <div class="flz_combobox">
                              <input id="textbox23" type="text" class="flz_textbox" value="Lorem ipsum dolor sit amed" />
                              <!-- Image must be in next line - otherwise unnecessary whitespace in IE -->
                              <a href="#">
                                 <img src="images/datepicker.gif" alt=""/>
                              </a>
                           </div>
                        </div>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </body>
</html>
